<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      :table-loading="loading"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="primary" @click="handleCreate">新增</el-button>
        <el-button type="primary" @click="deleteGroup">删除</el-button>
      </template>
      <template slot="riskLevel" slot-scope="scope">
        <el-tag :type="['primary', 'danger', 'warning', 'success'][scope.row.riskLevel]">
          <!-- {{ scope.row.riskLevel_dictText }} -->
          {{ ['Y', 'R', 'A', 'G'][scope.row.riskLevel] }}
        </el-tag>
      </template>
      <template slot="status" slot-scope="scope">
        <el-tag :type="['success', 'danger'][scope.row.status]">
          {{ scope.row.status_dictText }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { option, page } from '@/option/tenant/supplier/risk'
export default {
  name: 'Risk',
  data() {
    return {
      loading: false,
      query: {},
      data: [
        { riskLevel: '0', status: '0' },
        { riskLevel: '1', status: '1' },
        { riskLevel: '2', status: '0' },
        { riskLevel: '3', status: '1' }
      ],
      page,
      option: { ...option, operatingButtons: this.getOperatingButtons },
      checkIndex: []
    }
  },
  methods: {
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      // this.loading = true
      // getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
      //   const data = res.data.data
      //   this.page.total = data.total
      //   this.data = data.records
      //   this.loading = false
      // })
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    getOperatingButtons(row) {
      const edit = { text: '编辑', callback: this.handleEdit }
      const view = { text: '详情', callback: this.handleView }
      const drop = { text: '删除', callback: this.handleDelete }
      if (row.row.status === '0') {
        return [edit, view]
      } else if (row.row.status === '1') {
        return [view, drop]
      }
    },
    selectionChange(row) {
      this.checkIndex = row.map(v => v.$index)
    },
    deleteGroup() {
      this.data = this.data.filter(item => !this.checkIndex.includes(item.$index))
    },
    handleCreate() {
      this.$quickDrawer({
        title: '新增',
        width: '90%',
        component: require('@/views/tenant/supplier/risk/form').default,
        props: { type: 'add' },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        },
        buttons: [
          { text: '保存', callback: 'handleSave' },
          { text: '关闭', callback: 'handleClose' }
        ]
      })
    },
    handleEdit() {
      this.$quickDrawer({
        title: '编辑',
        width: '90%',
        component: require('@/views/tenant/supplier/risk/form').default,
        props: { type: 'edit' },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        },
        buttons: [
          { text: '保存', callback: 'handleSave' },
          { text: '关闭', callback: 'handleClose' }
        ]
      })
    },
  }
}
</script>

<style></style>
